<template>
    <view class="guess-like">
        <view class="guess-list">
            <view class="guess-item" v-for="item in list"
                @tap="navTo(`/long/productDetail/productDetail?id=${item.id}`)">
                <image class="guess-img" :src="baseUrl + item.image" mode="aspectFit" />
                <view class="guess-info">
                    <view class="guess-title">{{ item.title }}</view>
                    <view class="guess-price" v-if="item.vip_price != 0.00">会员价:¥{{ item.vip_price }}
                        <span>¥{{ item.market_price }}</span>
                    </view>
                    <view class="guess-price" v-if="item.market_price != 0.00">¥{{ item.market_price }}
                    </view>
                    <view class="guess-price" v-else>
                        验证后可查看产品价格
                    </view>
                </view>
                <view class="guess-btn">已售230份</view>
            </view>
        </view>
    </view>
</template>

<script>
import { getRecommendList } from "@/api/api"
import baseUrl from "@/api/baseUrl";
export default {
    name: 'guessLike',
    props: {
        title: {
            type: String,
            default: '猜你喜欢'
        }
    },
    data() {
        return {
            baseUrl,
            list: []
        }
    },

    created() {
        this.recommendList()
    },
    methods: {
        recommendList() {
            getRecommendList().then(res => {
                if (res.code == 1) {
                    this.list = res.data.list
                }
            })
        },
        navTo(url) {
            uni.navigateTo({
                url
            })
        }
    }
}
</script>

<style lang="less" scoped>
.guess-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0 23upx;
    grid-auto-flow: dense;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    padding: 25upx;
}

.guess-item {
    // width: 340upx;
    margin-bottom: 30upx;
    border-radius: 16upx;
    background: #fff;
    box-shadow: 0px 2px 8px 0px rgba(205, 205, 205, 0.2031);
    display: flex;
    flex-direction: column;
    // align-items: center;


}

.guess-img {
    width: 340upx;
    height: 436upx;
    border-radius: 16upx;
}

.guess-info {
    padding: 5upx 20upx;
}

.guess-title {
    font-size: 30upx;
    color: #333333;
    margin-bottom: 10upx;
    max-height: 78upx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 38upx;
    word-break: break-all;
    white-space: normal;

}

.guess-price {
    display: flex;
    font-size: 26upx;
    color: #FF6200;
    margin-bottom: 10upx;
    font-weight: normal;

    span {
        margin-left: 10upx;
        font-size: 24upx;
        color: #333333;
        text-decoration: line-through;
    }
}

.guess-btn {
    display: flex;
    justify-content: flex-end;
    font-size: 20upx;
    color: #CCCCCC;
    margin-top: 10upx;
    padding-bottom: 20upx;
    padding-right: 20upx;
}
</style>